<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-12-18 15:55:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-31 11:17:13
 * @FilePath: LineChartsFull.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- 折线图和柱状图组合 -->
    <div class="LineCharts">
        <div id="chartOneFull"></div>
    </div>
</template>
<script>
export default {
    name:'LineChartsFull',
    props: {
        fullScreenDialog: {
            type: Boolean,
            default: false
        },
        chartData: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            myChartFull: null,
        }
    },
    methods: {
        getChart() {
            let that = this
            that.myChartFull = that.$echarts.init(document.getElementById('chartOneFull'))
            let ListOne = []
            let ListTwo = []
            let ListIndex = []
            that.chartData.map((item, index) => {
                ListOne.push(item.qqdhStudentCount) // 学校总人数
                ListTwo.push(Number(item.callSecond) !== 0 ? (Number(item.callSecond) / 60).toFixed(2) : 0) // 通话时长 min/分钟
                ListIndex.push(index + 1) // 排序
            })
            var maxa = Math.max.apply(null, ListOne)
            var maxb = Math.max.apply(null, ListTwo)
            let color = ['#15ADDF', '#61D7A7']
            let option = {
                color: color,
                title: {
                    left: 'le、ft',
                    text: '概率',
                    show: false
                },
                // dataZoom: [{
                //     type: 'inside',
                //     // show: false, //flase直接隐藏图形
                //     // xAxisIndex: [0],
                //     // left: '5%', //滚动条靠左侧的百分比
                //     // bottom: 30,
                //     start: 0,//滚动条的起始位置
                //     end: 50, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                //     zoomOnMouseWheel: true,  // 关闭鼠标滚轮缩放
                //     moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
                //     moveOnMouseMove: true  // 开启鼠标移动窗口平移
                // }],
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        return (
                            `<span style='font-size: 12px;
                                font-family: Source Han Sans CN, Source Han Sans CN;
                                font-weight: bold;
                                color: #0A1F48;margin-left:-20px;margin-bottom:4px;display:inline-block;'>${params[0].dataIndex}-${that.chartData[params[0].dataIndex].schoolName}</span>` +
                            `<br>` +
                            params
                                .map((item, index) => {
                                    let str = `<span style="display:inline-block;width:10px;height:10px;margin: 0 8px 0 0px;background-color:${color[0]};"></span>`
                                    if (item.componentSubType === 'line') {
                                        str = `<span style="display:inline-block; width: 5px;height: 2px; margin: 0 -5px 3px -3px;background-color: ${item.color}"></span>
								   <span style="display:inline-block; width:8px;height:8px; border-radius:50%;border: 1px solid ${item.color};"></span>
								   <span style="display:inline-block; width: 5px;height: 2px; margin: 0 7px 3px -5px;background-color: ${item.color}"></span>`
                                    }
                                    let seriesNameStr = `<span style="display:inline-block;padding:2px 0;">${item.seriesName}</span>`
                                    let value = item.value
                                    let valueStr = `<span style="display:inline-block;margin-left:20px;padding:2px 0;">${value} ${params[index].seriesName == '学校人数' ? '人' : 'min'}</span>`
                                    return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
									<span>${str}${seriesNameStr}</span>
									<span>${valueStr}</span>
								</span>`
                                })
                                .join(``)
                        )
                    },
                },
                grid: {
                    show: false,
                    top: '70',
                    bottom: '50',
                    right: that.$util.nowSizeWidth(80),
                    left: that.$util.nowSizeWidth(80)
                },
                legend: {
                    show: true,
                    // selectedMode: 'single',    //设置显示单一图例的图形，点击可切换
                    top: that.$util.nowSizeWidth(10),
                    left: that.$util.nowSizeWidth(8),
                    textStyle: {
                        color: 'rgba(255,255,255,0.8)',
                        fontSize: 12,
                        padding: [0, 0, 0, 0], // 修改文字和图标距离
                    },
                    itemHeight: 12, // 修改icon图形大小
                    itemGap: 30,
                    data: [
                        {
                            name: '学校人数',
                            icon: 'square',
                        }, {
                            name: '通话时长',
                            icon: ''
                        }
                    ],
                    inactiveColor: '#ccc',
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ListIndex,
                        axisPointer: {
                            type: 'line'
                        },
                        axisTick: {
                            show: true,
                            interval: 0
                        },
                        // 轴线
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#0D3B77'
                            }
                        },
                        // X轴文字设置
                        axisLabel: {
                            color: 'rgba(255,255,255,0.8)',
                            fontSize: 12,
                            interval: 0,
                            margin: 15 // 柱状图的x轴上的标签文字距离x轴的距离
                        },
                        axisTick: {
                            show: false
                        }
                    }
                ],
                //设置两个y轴，左边显示数量，右边显示概率
                yAxis: [
                    {
                        type: 'value',
                        name: '学校人数（人）',
                        show: true,
                        interval: 50,
                        // name: '单位：次',
                        nameRotate: 90, // 旋转角度
                        nameLocation: 'middle',
                        nameGap: that.$util.nowSizeWidth(56),
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.8)',
                            fontSize: 12,
                        },
                        min: 0,
                        max: that.$util.set_max(maxa),
                        interval: that.$util.set_max(maxa) / 5,
                        // y轴线
                        axisLine: {
                            show: false
                        },
                        // 轴文字
                        axisLabel: {
                            color: 'rgba(255,255,255,0.4)',
                            fontSize: 12,
                            formatter: function (value, index) {
                                if (value >= 10000) {
                                    return value / 10000 + "w";
                                } if (value >= 1000) {
                                    return value / 1000 + "k";
                                } else {
                                    return value;
                                }
                            }
                        },
                        // 网格线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid', // dotted：虚线 solid:实线
                                width: 1,
                                color: '#0D3B77'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '通话时长（min）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.8)',
                            fontSize: 12,
                        },
                        min: 0,
                        max: that.$util.set_max(maxb),
                        interval: that.$util.set_max(maxb) / 5,
                        nameRotate: -90, // 旋转角度
                        nameLocation: 'middle',
                        nameGap: that.$util.nowSizeWidth(56),
                        axisLabel: {
                            formatter: '{value} %',
                            color: 'rgba(255,255,255,0.4)',
                            fontSize: 12,
                        },
                        // 轴文字
                        axisLabel: {
                            color: 'rgba(255,255,255,0.4)',
                            fontSize: 12,
                        },
                        // 网格线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid', // dotted：虚线 solid:实线
                                width: 1,
                                color: '#0D3B77'
                            }
                        }
                    }
                ],

                //每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
                series: [
                    {
                        name: '学校人数',
                        type: 'bar',
                        data: ListOne,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        //设置柱状图大小
                        barWidth: '50%',
                        //设置柱状图渐变颜色
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: '#15ADDF' // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: '#0179DC' // 100% 处的颜色
                                            }
                                        ]
                                    }
                                },
                            },
                            // 移入当前的柱状图时改变颜色
                            emphasis: {
                                color: '#2E63CB',
                                borderWidth: 1,
                                borderColor: 'rgba(255,255,255,0.4)',
                            }
                        },
                    },
                    {
                        name: '通话时长',
                        type: 'line',
                        yAxisIndex: 1,    //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
                        data: ListTwo,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        symbol: "circle",
                        symbolSize: 8,
                        label: {
                            show: true,
                            position: 'top',
                            color: 'rgba(255,255,255,0.65)',
                        },
                        lineStyle: {
                            color: "#61D7A7",
                            width: 2,
                        },
                        itemStyle: {
                            normal: {
                                color: "#61D7A7",
                                borderColor: "rgba(255,255,255,0.85)",
                                borderType: "solid",
                                borderWidth: 1,
                            }
                        }
                    }
                ]
            }
            that.myChartFull.setOption(option, true)
        },
    },
    mounted() {
        this.getChart()
        window.addEventListener('resize', () => {
            setTimeout(async () => {
                await this.myChartFull.resize()
            }, 100)
        })
    }
}
</script>
<style lang="less" scoped>
.LineCharts {
    width: 100%;
    height: 100%;
    background: #0A1F48;

    #chartOneFull {
        width: 100%;
        height: 100%;
    }
}
</style>